<template>
  <div class="treatmentinSide">
    <div class="nav-search">
      <el-input v-model="searchParams.blurry" placeholder="输入关键字"></el-input>
      <el-date-picker
        v-model="searchParams.logDate"
        :clearable="false"
        type="datetime"
        value-format="yyyy-MM-dd HH:mm:ss"
        format="yyyy-MM-dd HH:mm:ss"
        placeholder="创建日期"
        clear-icon
      >
      </el-date-picker>
      <span>
        <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
        <el-button class="filter-item" size="mini" type="warning" icon="el-icon-download" @click="exportList">导出</el-button>
      </span>
    </div>
    <div class="tableList">
      <el-table
        ref="table"
        v-loading="loading"
        stripe
        :data="data"
        size="small"
        style="width: 100%;"
      >
        <el-table-column prop="logType" label="日志类型"></el-table-column>
        <el-table-column prop="logDate" label="操作时间" width="150"></el-table-column>
        <el-table-column prop="action" label="操作描述"></el-table-column>
        <el-table-column prop="patientName" label="患者姓名"></el-table-column>
        <el-table-column prop="patientId" label="患者编号" width="150"></el-table-column>
        <el-table-column prop="actionType" label="操作类型"></el-table-column>
        <el-table-column prop="userName" label="操作人"></el-table-column>
        <el-table-column prop="clinicName" label="所属诊所" width="150"></el-table-column>
      </el-table>
      <!--分页组件-->
      <el-pagination
        background
        :page-size.sync="page.size"
        :total="total"
        :current-page.sync="page.page"
        style="margin-top: 8px; text-align: right;"
        layout="total, prev, pager, next, sizes"
        @size-change="sizeChangeHandler($event)"
        @current-change="pageChangeHandler"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { query, download } from '@/api/log';

export default {
  name: 'LogType',
  data() {
    return {
      loading: false,
      searchParams: {
        blurry: null, // 模糊搜索
        logDate: null, // 创建时间
        logType: '患者日志'
      },
      data: [],
      page: {
        size: 10,
        page: 1
      },
      total: 0
    };
  },
  computed: {},
  mounted() {
    this.queryLogList({ page: 0, size: 10, logType: '患者日志' });
  },
  methods: {
    // 搜索
    toQuery() {
      const search = {
        page: this.page.page - 1,
        size: this.page.size,
        ...this.searchParams
      };
      this.queryLogList(search);
    },
    // 导出
    exportList() {
      const params = {
        ...this.searchParams
      };
      download(params).then(res => {
        const url = window.URL.createObjectURL(res);
        var a = document.createElement('a');
        document.body.appendChild(a);
        a.href = url;
        a.download = '日志数据.xlsx';
        a.click();
        window.URL.revokeObjectURL(url);
      }).catch(er => {});
    },
    sizeChangeHandler(item) {
      this.toQuery();
    },
    pageChangeHandler(item) {
      this.toQuery();
    },
    // 列表
    queryLogList(params) {
      this.loading = true;
      query(params).then(res => {
        this.data = res.content || [];
        this.total = parseInt(res.totalElements) || 0;
        this.loading = false;
      }).catch(er => {
        this.loading = false;
      });
    }
  }
};
</script>
<style scoped lang='scss'>
.nav-search{
  padding: 10px 0;
  .el-input{
    width: 320px;
    margin-right: 10px;
  }
  .el-date-editor{
    width: 200px;
  }
}
</style>
